# Config

The main configuration object describing what Puck can render.

```tsx copy
const config = {
  components: {
    HeadingBlock: {
      fields: {
        children: {
          type: "text",
        },
      },
      render: ({ children }) => {
        return <h1>{children}</h1>;
      },
    },
  },
};
```

## Params

| Param                       | Example                                                        | Type                                                                    | Status   |
| --------------------------- | -------------------------------------------------------------- | ----------------------------------------------------------------------- | -------- |
| [`components`](#components) | `components: { HeadingBlock: {{ render: () => <h1 /> } }`      | Object                                                                  | Required |
| [`root`](#root)             | `root: { render: () => <div /> }`                              | [`ComponentConfig`](/docs/api-reference/configuration/component-config) | -        |
| [`categories`](#categories) | `categories: { typography: { components: ["HeadingBlock"] } }` | Object                                                                  | -        |

## Required params

### `components`

An object describing the components available to Puck. Each component definition implements the [`ComponentConfig` API](/docs/api-reference/configuration/component-config).

```tsx {2-13} copy showLineNumbers
const config = {
  components: {
    HeadingBlock: {
      fields: {
        children: {
          type: "text",
        },
      },
      render: ({ children }) => {
        return <h1>{children}</h1>;
      },
    },
  },
};
```

## Optional params

### `root`

An object describing the root of your component tree. This component wraps the rest of your components. Implements the [`ComponentConfig` API](/docs/api-reference/configuration/component-config).

- You must return children to render the default content.

```tsx {2-6} copy showLineNumbers
const config = {
  root: {
    render: ({ children }) => {
      return <div>{children}</div>;
    },
  },
  // ...
};
```

### `categories`

An object describing categories for your components. Will be used to group the components in the left side-bar.

```tsx {2-6} copy showLineNumbers
const config = {
  categories: {
    typography: {
      components: ["HeadingBlock"],
    },
  },
  // ...
};
```

#### `categories[key].components`

An array of components in this category.

- Must use names of [`components`](#components).
- A component can appear in more than one category.

#### `categories[key].title`

The user-facing title for the category. Will use the `category` key if not provided.

#### `categories[key].visible`

A boolean describing whether or not the category should be visible in the side bar. **Defaults to `true`**.

#### `categories[key].defaultExpanded`

A boolean describing whether or not the category should be expanded by default in the side bar. **Defaults to `true`**.

#### `categories["other"]`

The default category for all uncategorized components. Receives all other categories params.
